<template>
  <div>
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height:'30%' }"
      closeable
    >
      <div class="popup-wrap">
        <span class="title">短信验证</span>
        <div class="main-content">
          <input v-model.trim="value" type="number" placeholder="请输入验证码" />
          <div class="get-code get-code-btn" v-if="isSendCode" @click="handleSendCode">点击获取</div>
          <div class="get-code count-down" v-else>
            <span class="num">{{count_down}}s后</span>
            <span class="again">重新发送</span>
          </div>
        </div>
        <div class="submit-btn" @click="submit" v-if="isButton">
          <span>确定</span>
        </div>
        <div class="submit-btn submit-hui" v-else>
          <span>提交中</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import Vue from 'vue'
import { Popup } from 'vant'
import { agentCollectApply, balancePayByBackSMS } from '@/api/order/order.js'
import { validLength } from '@/utils/validate'
import { openPage} from '@/utils/utils'

Vue.use(Popup)
export default Vue.extend({
  data() {
    return {
      show: false,
      value: '',
      count_down: 0,
      sendCodeParams: {},
      isSendCode: true,
      count_downtimer: null,
      orderNo: '',
      isButton: true
    }
  },
  methods: {
    submit() {
      if (!this.value) {
        this.$Error('请输入验证码')
        return
      }
      if (!validLength(this.value, 5)) {
        this.$Error('请输入正确的验证码')
        return
      }
      this.$loadingWrap.show()
      this.isButton = false
      balancePayByBackSMS({
        verification_code: this.value,
        biz_order_no: this.orderNo,
        order_id: this.sendCodeParams.order_id
      }).then((res) => {
        this.$loadingWrap.close()
        this.isButton = true
        if (res.status == 1) {
          if (res.data.redirect_url) {
            // window.location.href = res.data.url
            openPage(res.data.redirect_url)
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    handleShow(values) {
      this.sendCodeParams = values
      this.show = true
      this.value = ''
      this.isSendCode = true
      this.count_down = 0
      clearInterval(this.count_downtimer)
    },
    handleClose() {
      this.show = false
      this.isSendCode = true
    },
    handleSendCode() {
      this.$loadingWrap.show()
      const sendData = {
        order_id: this.sendCodeParams.order_id,
        tlfz_pay_type: this.sendCodeParams.tlfz_pay_type,
        get_verification_code_again: 1,
        force_change: 1
      }
      if (this.sendCodeParams.peer_pay_id) {
        sendData.peer_pay_id = this.sendCodeParams.peer_pay_id
      }
      if (this.sendCodeParams.pay_type) {
        sendData.pay_type = this.sendCodeParams.pay_type
      }
      agentCollectApply(sendData).then((res) => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.orderNo = res.data.order_no
          this.count_down = 60
          this.isSendCode = false
          this.count_downtimer = setInterval(() => {
            this.count_down--
            if (this.count_down <= 0) {
              this.isSendCode = true
              clearInterval(this.count_downtimer)
            }
          }, 1000)
        } else {
          this.$Error(res.msg)
        }
      })
    }
  }
})
</script>
<style lang="scss">
.van-popup__close-icon {
  font-size: 40px;
}
.popup-wrap {
  .title {
    font-size: 32px;
    color: #333333;
    text-align: center;
    margin: 40px 0 62px;
    display: block;
    font-family: PingFangSC Medium;
    font-weight: 500;
  }
  .main-content {
    display: flex;
    margin: 0 32px;
    border: 1px solid #DEDEDE;
    padding: 18px 0;
    border-radius: 4px;
    input {
      flex: 1;
      margin-left: 26px;
      font-size: 30px;
    }
    .get-code {
      font-size: 30px;
      border-left: 1px solid #D5D5D5;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 248px;
      text-align: center;
      padding: 8px 0;
    }
    .get-code-btn {
      color: #FF6041;
    }
    .count-down {
      font-size: 30px;
      display: flex;
      justify-content: center;
      .num {
        color: #FF402D;
      }
      .again {
        color: #686868;
      }
    }
  }
  .submit-btn {
    margin: 0 32px;
    span {
      width: 100%;
      border-radius: 40px;
      padding: 18px 0;
      text-align: center;
      margin: 36px 0 40px;
      background: linear-gradient(180deg,#FF6947, #FF402D);
      display: block;
      font-size: 32px;
      color: #FFFFFF;
    }
  }
}
.submit-hui{
  span{
    background: #999999 !important;
  }
}
</style>